Created:23/12/2018
By: TeamXcel
Thank you for purchasing our landing page. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The landing page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Appium is a colofull app landing page template">
<meta name="author" content="TeamXcel">
<title>Appium | App Landing Page</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Elegant Font Icons CSS -->
<link rel="stylesheet" href="css/elegant-font-icons.css">
<!-- Elegant Line Icons CSS -->
<link rel="stylesheet" href="css/elegant-line-icons.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Venobox CSS -->
<link rel="stylesheet" href="css/venobox/venobox.css">
<!-- Slicknav CSS -->
<link rel="stylesheet" href="css/slicknav.min.css">
<!-- animate CSS -->
<link rel="stylesheet" href="css/animate.min.css">
<!-- OWL-Carousel CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Swiper CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body data-spy="scroll" data-target="#navmenu" data-offset="70">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="preloader">
<div class="loader">
<img src="img/preloader.svg" alt="Loading...">
</div>
</div><!-- Preloader -->
<header id="header" class="header-section">
</header> <!-- /.header-section -->
<section id="home" class="hero-section">
</section><!-- /.hero-section -->
<section class="promo-section padding">
</section><!-- /.promo-section -->
<div class="video-section">
</div><!-- /.video-section-->
<section id="features" class="feature-section padding">
</section><!-- /.feature-section -->
<section id="screenshots" class="screenshots-section padding">
</section><!-- /.screenshots-section -->
<section id="reviews" class="testimonial-section padding">
</section><!-- /.testimonial-section -->
<section id="download" class="download-section padding">
</section><!-- /.download-section -->
<section class="blog-section padding">
</section><!-- /.blog-section -->
<div id="subscribe" class="subscribe-section padding">
</div><!-- /.subscribe-section -->
<footer class="footer-section align-center">
</footer><!-- /.footer-section -->
<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_carrot-up"></i></a>
<!-- jQuery Lib -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<!-- Tether JS -->
<script src="js/vendor/tether.min.js"></script>
<!-- Bootstrap JS -->
<script src="js/vendor/bootstrap.min.js"></script>
<!-- Slicknav JS -->
<script src="js/vendor/jquery.slicknav.min.js"></script>
<!-- OWL-Carousel JS -->
<script src="js/vendor/owl.carousel.min.js"></script>
<!-- Swiper JS -->
<script src="js/vendor/swiper.min.js"></script>
<!-- Smooth Scroll JS -->
<script src="js/vendor/smooth-scroll.min.js"></script>
<!-- venobox JS -->
<script src="js/vendor/venobox.min.js"></script>
<!-- Ajaxchimp JS -->
<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
<!-- Wow JS -->
<script src="js/vendor/wow.min.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
The site is made of many sections like header, slider, testimonials, services and more...
<header id="header" class="header-section"> <div class="container"> <nav class="navbar"> <a href="#" class="navbar-brand"> <img class="logo-dark" src="img/logo-dark.png" alt="Appium"> <img class="logo-light" src="img/logo-light.png" alt="Appium"> </a> <div class="d-flex menu-wrap"> <div id="navmenu" class="mainmenu"> <ul class="nav"> <li ><a data-scroll class="nav-link active" href="#home">Home <span class="sr-only">(current)</span></a></li> <li><a data-scroll class="nav-link" href="#features">Features</a></li> <li><a data-scroll class="nav-link" href="#screenshots">Screenshots</a></li> <li><a data-scroll class="nav-link" href="#download">Download</a></li> </ul> </div> </div> </nav> </div> </header> <!-- /.header-section -->
<section id="home" class="hero-section"> <div class="container"> <div class="row hero-inner"> <div class="col-lg-9"> <div class="hero-content"> <h1>Make your business<br>easy with Appium</h1> <p>Appium is a Powerful Landing Page Template for Mobile App. Appium is better way to <br>present and promote your startup mobile app website.</p> <div class="hero-btn"> <a href="#" class="download-btn"><img src="img/appstore.png" alt="btn"></a> <a href="#" class="download-btn"><img src="img/playstore.png" alt="btn"></a> </div> </div> </div> <div class="hero-moc"></div> </div> </div> </section><!-- /.hero-section -->
<section class="promo-section padding"> <div class="container"> <div class="promo-wrap row"> <div class="col-md-4 col-sm-6 sm-padding wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms"> <div class="promo-content text-center"> <div class="icon"><i class="icon-adjustments"></i></div> <h3>Easy To Use</h3> <p>Lorem ipsum dolor sit amet adipisicing of more of sedis do eiusmod tempor incididunt. Appipsum incididunt.</p> </div> </div><!-- Promo-1 --> <div class="col-md-4 col-sm-6 sm-padding wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1000ms"> <div class="promo-content text-center"> <div class="icon"><i class="icon-anchor"></i></div> <h3>Stunning Design</h3> <p>Lorem ipsum dolor sit amet adipisicing of more of sedis do eiusmod tempor incididunt. Appipsum incididunt.</p> </div> </div><!-- Promo-2 --> <div class="col-md-4 col-sm-6 sm-padding wow fadeInUp" data-wow-delay="400ms" data-wow-duration="1000ms"> <div class="promo-content text-center"> <div class="icon"><i class="icon-clock"></i></div> <h3>24/7 Support</h3> <p>Lorem ipsum dolor sit amet adipisicing of more of sedis do eiusmod tempor incididunt. Appipsum incididunt.</p> </div> </div><!-- Promo-3 --> </div> </div> </section><!-- /.promo-section -->
<div class="video-section"> <div class="container"> <div class="video-content"> <div class="play-btn"><a class="img-popup" data-autoplay="true" data-vbtype="video" href="https://www.youtube.com/watch?v=z8OWD3Bg1tQ"><i class="fa fa-play"></i></a></div> </div> </div> </div><!-- /.video-section-->
<section id="features" class="feature-section padding"> <div class="container"> <div class="section-heading mb-60 text-center wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms"> <h2>Appium Features</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>It has survived not only five centuries.</p> </div> <div id="feature-carousel" class="feature-carousel owl-carousel"> <div class="feature-item"> <div class="feature-content text-center wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms"> <div class="icon"><i class="icon-heart"></i></div> <h3>Made With Love</h3> <p>Lorem Ipsum is simply text of the printing and typesetting industry.It has centuries.</p> </div> </div><!-- Feature-1 --> <div class="feature-item"> <div class="feature-content text-center wow fadeInUp" data-wow-delay="100ms" data-wow-duration="1000ms"> <div class="icon"><i class="icon-layers"></i></div> <h3>Great Interface</h3> <p>Lorem Ipsum is simply text of the printing and typesetting industry.It has centuries.</p> </div> </div><!-- Feature-2 --> <div class="feature-item"> <div class="feature-content text-center wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1000ms"> <div class="icon"><i class="icon-adjustments"></i></div> <h3>Pure & Simple</h3> <p>Lorem Ipsum is simply text of the printing and typesetting industry.It has centuries.</p> </div> </div><!-- Feature-3 --> <div class="feature-item"> <div class="feature-content text-center wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1000ms"> <div class="icon"><i class="icon-shield"></i></div> <h3>Retina Ready</h3> <p>Lorem Ipsum is simply text of the printing and typesetting industry.It has centuries.</p> </div> </div><!-- Feature-4 --> <div class="feature-item"> <div class="feature-content text-center wow fadeInUp" data-wow-delay="400ms" data-wow-duration="1000ms"> <div class="icon"><i class="icon-anchor"></i></div> <h3>Free Updates</h3> <p>Lorem Ipsum is simply text of the printing and typesetting industry.It has centuries.</p> </div> </div><!-- Feature-5 --> <div class="feature-item"> <div class="feature-content text-center wow fadeInUp" data-wow-delay="500ms" data-wow-duration="1000ms"> <div class="icon"><i class="icon-chat"></i></div> <h3>24/7 Support</h3> <p>Lorem Ipsum is simply text of the printing and typesetting industry.It has centuries.</p> </div> </div><!-- Feature-6 --> </div> </div> </section><!-- /.feature-section -->
<section id="screenshots" class="screenshots-section padding"> <div class="container"> <div class="section-heading mb-60 text-center wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms"> <h2>Screenshots</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>It has survived not only five centuries.</p> </div> <div class="swiper-container"> <div class="mobile-mock"> <div class="screen"></div> <div class="circle"></div> </div> <div class="swiper-wrapper"> <div class="swiper-slide"> <img class="w-100" src="img/screenshot-1.jpg" alt="screenshot"> </div> <div class="swiper-slide"> <img class="w-100" src="img/screenshot-2.jpg" alt="screenshot"> </div> <div class="swiper-slide"> <img class="w-100" src="img/screenshot-3.jpg" alt="screenshot"> </div> <div class="swiper-slide"> <img class="w-100" src="img/screenshot-4.jpg" alt="screenshot"> </div> <div class="swiper-slide"> <img class="w-100" src="img/screenshot-5.jpg" alt="screenshot"> </div> <div class="swiper-slide"> <img class="w-100" src="img/screenshot-6.jpg" alt="screenshot"> </div> <div class="swiper-slide"> <img class="w-100" src="img/screenshot-7.jpg" alt="screenshot"> </div> <div class="swiper-slide"> <img class="w-100" src="img/screenshot-8.jpg" alt="screenshot"> </div> </div> <!-- Carousel Arrows --> <div class="swiper-next"><i class=" arrow_carrot-right"></i></div> <div class="swiper-prev"><i class=" arrow_carrot-left"></i></div> </div> </div> </section><!-- /.screenshots-section -->
<section id="reviews" class="testimonial-section padding"> <div class="container"> <div class="section-heading mb-60 text-center wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms"> <h2>What People Say</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>It has survived not only five centuries.</p> </div> <div id="testimonial-carousel" class="testimonial-carousel owl-carousel"> <div class="testimonial-item"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <div class="testi-footer"> <img src="img/team-1.jpg" alt="profile"> <h4>Michel Brown<span>Marketer</span></h4> </div> </div> <div class="testimonial-item"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <div class="testi-footer"> <img src="img/team-2.jpg" alt="profile"> <h4>Angelina Rose<span>Designer</span></h4> </div> </div> <div class="testimonial-item"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <div class="testi-footer"> <img src="img/team-3.jpg" alt="profile"> <h4>Jonathan Smith<span>Developer</span></h4> </div> </div> <div class="testimonial-item"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <div class="testi-footer"> <img src="img/team-1.jpg" alt="profile"> <h4>Taylor Swift<span>Programer</span></h4> </div> </div> </div> </div> </section><!-- /.testimonial-section -->
<section id="download" class="download-section padding"> <div class="container"> <div class="row"> <div class="col-lg-7"> <div class="download-content"> <h2>Try Appium app for free!</h2> <p>Appium is a Powerful Landing Page Template for Mobile App. Appium is better way to present and promote your startup mobile app website.</p> <a class="download-btn" href="#"><img src="img/appstore.png" alt="Download App Store"></a> <a class="download-btn" href="#"><img src="img/playstore.png" alt="Download Play Store"></a> </div> </div> <div class="download-mockup wow fadeInRight" data-wow-delay="0ms" data-wow-duration="800ms"></div> </div> </div> </section><!-- /.download-section -->
<section class="blog-section padding"> <div class="container"> <div class="section-heading mb-60 text-center wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms"> <h2>Latest Stories</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>It has survived not only five centuries.</p> </div> <div class="row"> <div class="col-lg-4 col-sm-6 sm-padding wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms"> <div class="blog-box"> <div class="blog-thumb"> <img src="img/blog-1.jpg" alt="img"> <div class="post-meta"> <div> <span><i class="fa fa-user"></i>By: Admin</span> <span><i class="fa fa-calendar"></i>Jan 01, 2018</span> </div> </div> </div> <div class="blog-content"> <h3><a href="#">No one cares about products. people care about ideas.</a></h3> <p>Lorem Ipsum is simply text of the printing and typesetting industry.It has survived not only five centuries.</p> <a href="#" class="read-more">Read More</a> </div> </div> </div><!-- Post-1 --> <div class="col-lg-4 col-sm-6 sm-padding wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1000ms"> <div class="blog-box"> <div class="blog-thumb"> <img src="img/blog-2.jpg" alt="img"> <div class="post-meta"> <div> <span><i class="fa fa-user"></i>By: Admin</span> <span><i class="fa fa-calendar"></i>Jan 01, 2018</span> </div> </div> </div> <div class="blog-content"> <h3><a href="#">No one cares about products. people care about ideas.</a></h3> <p>Lorem Ipsum is simply text of the printing and typesetting industry.It has survived not only five centuries.</p> <a href="#" class="read-more">Read More</a> </div> </div> </div><!-- Post-2 --> <div class="col-lg-4 col-sm-6 sm-padding wow fadeInUp" data-wow-delay="400ms" data-wow-duration="1000ms"> <div class="blog-box"> <div class="blog-thumb"> <img src="img/blog-3.jpg" alt="img"> <div class="post-meta"> <div> <span><i class="fa fa-user"></i>By: Admin</span> <span><i class="fa fa-calendar"></i>Jan 01, 2018</span> </div> </div> </div> <div class="blog-content"> <h3><a href="#">No one cares about products. people care about ideas.</a></h3> <p>Lorem Ipsum is simply text of the printing and typesetting industry.It has survived not only five centuries.</p> <a href="#" class="read-more">Read More</a> </div> </div> </div><!-- Post-3 --> </div> </div> </section><!-- /.blog-section -->
<div id="subscribe" class="subscribe-section padding"> <div class="container text-center"> <div class="subscribe-content"> <img class="logo wow fadeInUp" src="img/logo-light.png" alt="logo" data-wow-delay="400ms" data-wow-duration="1000ms"> <p>Lorem Ipsum is simply text of the printing and typesetting industry. <br>It has survived not only five centuries.</p> </div> <div class="subscribe-wrap"> <form action="#" class="subscribe-form"> <input type="email" name="email" id="subs-email" class="form_input" placeholder="Enter Your Email Address..."> <button type="submit" class="submit">Subscribe</button> <div id="subscribe-result"> <p class="subscription-success"></p> <p class="subscription-error"></p> </div> </form> </div><!-- /.subscribe_wrap --> <div class="clearfix"></div> <ul class="social-link"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-skype"></i></a></li> <li><a href="#"><i class="fa fa-pinterest"></i></a></li> </ul><!-- /.social_link --> </div> </div><!-- /.subscribe-section -->
<footer class="footer-section align-center"> <div class="container"> <p>© 2018 Appium Powered by TeamXcel</p> </div> </footer><!-- /.footer-section -->
These are the css files:
This theme use these Javascript files:
bootstrap.min.js
smooth-scroll.min.js
owl.carousel.min.js
jquery.ajaxchimp.min.js
jquery-1.12.4.min.js
owl.carousel.min.js
venobox.min.js
wow.min.js
main.js
There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
TeamXcel